<!-- 账户管理 - 新增/编辑账户 -->
<template>
    <div class="rightCenter">
        <div class="editTop">
            <div class="editTopTitle" @click="cancelClick()">账户管理</div>
            <i class="icon font_family icon-yema-you"></i>
            <div class="editTopTitle">{{editVal}}</div>
        </div>
        <div class="editList">
            <div class="editListName">
                账号：
            </div>
            <input class="editListInpBox fontBlue" v-model.trim='adminVal' type="text" placeholder="名称不超过15个字符" maxlength="15">
            <span class="warn" v-show='adminShow'>请输入账号</span>
        </div>
        <div class="editList" v-show="editVal != '编辑账户'">
            <div class="editListName">
                密码：
            </div>
            <input class="editListInpBox fontBlue" v-model.trim='passwordVal' type="password" placeholder="8-16位数字字母组合" oninput="value=value.replace(/[^a-zA-Z0-9]/ig,'')"
                maxlength="16">
            <span class="warn" v-show='passwordShow'>8-16位数字字母组合</span>
        </div>
        <div class="editList" v-show="editVal != '编辑账户'">
            <div class="editListName">
                确认密码：
            </div>
            <input class="editListInpBox fontBlue" v-model.trim='passwordOkVal' type="password" placeholder="8-16位数字字母组合" oninput="value=value.replace(/[^a-zA-Z0-9]/ig,'')"
                maxlength="16">
            <span class="warn" v-show='passwordOkShow'>两次密码不一致，请重新输入</span>
        </div>
        <div class="editList">
            <div class="editListName">
                姓名：
            </div>
            <input class="editListInpBox fontBlue" v-model.trim='nameVal' type="text" placeholder="请输入真是姓名" maxlength="50">
            <span class="warn" v-show='nameShow'>请输入真是姓名</span>
        </div>
        <div class="editList">
            <div class="editListName">
                手机：
            </div>
            <input class="editListInpBox fontBlue" v-model.trim='phoneVal' type="text" placeholder="请输入11位手机号码" oninput="value=value.replace(/[^0-9]/ig,'')"
                maxlength="11">
            <span class="warn" v-show='phoneShow'>请输入11位手机号码</span>
        </div>
        <div class="editList">
            <div class="editListName">
                角色类型
            </div>
            <div class="editListInpFont jurisdicBut" @click='jurisdicClick()'>
                {{jurisdictionVal}}
            </div>

            <span class="warn" v-show='checkShow'>请选择角色类型</span>
        </div>
        <div class="footButton">
            <div class="addBut" @click='addClick'>
                保 存
            </div>
            <div class="cancelBut" @click='cancelClick'>
                取 消
            </div>
        </div>
        <!-- 重置密码 -->
        <div class="fixedBox" v-show='jurisdicShow'>
            <div class="passwordBox ">
                <div class="popuplistBoxTop">
                    <div class="popuplistBoxTopFont">
                        角色选择（单选）
                    </div>
                    <div class="popuplistBoxTopBut" @click='jurisdicCancelClick()'>
                        <i class="icon font_family icon-chuangkouguanbi-dianji"></i>
                    </div>
                </div>
                <div class="passwordConter">
                    <ul class="listUl">
                        <li class="listLi fristLI">
                            <div class="listDiv listOne">
                                账号
                            </div>
                            <div class="listDiv listTwo">
                                姓名
                            </div>
                            <div class="listDiv listThree">
                                操作
                            </div>
                        </li>
                        <li class="listLi dataLi" v-for="(item,index) in dataList" :class="{grayBack:index % 2 == 1}" :key='index'>
                            <div class="listDiv listOne">
                                {{index+1}}
                            </div>
                            <div class="listDiv listTwo">
                                {{item.name}}
                            </div>
                            <div class="listDiv listThree">
                                <div class="buttonBox okbut" @click='checkOkClick(index)'>
                                    确认
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="paging">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]"
                        :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalVal">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import taskRequest from "../../assets/task";
const crypto = require("crypto");
export default {
  data() {
    return {
      editVal: "添加账户",
      adminVal: "", //账号
      adminShow: false,
      passwordVal: "", //密码
      passwordShow: false,
      passwordOkVal: "", //确认密码
      passwordOkShow: false,
      nameVal: "", //姓名
      nameShow: false,
      phoneVal: "", //手机
      phoneShow: false,
      dataList: [], //角色列表
      jurisdicShow: false, //角色选择弹框
      jurisdictionVal: "点击选择角色",
      checkShow: false,
      jurisdictionCode: [],
      totalVal: ""
    };
  },
  filters: {},
  created: function() {
    let self = this;
    if (sessionStorage.getItem("TABLIST")) {
      let arr = JSON.parse(sessionStorage.getItem("TABLIST"));
      let routShow = false;
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].name == "权限管理") {
          routShow = true;
        }
      }
      if (!routShow) {
        this.$router.push({
          path: "/login"
        });
        sessionStorage.clear();
        self.$message("暂无权限");
        return;
      }
    } else {
      this.$router.push({
        path: "/login"
      });
      sessionStorage.clear();
      self.$message("暂无权限");
      return;
    }
    if (self.$route.query.button == "add") {
      self.editVal = "添加账户";
    } else {
      self.editVal = "编辑账户";
      taskRequest
        .adminInfoFun({
          code: self.$route.query.code
        })
        .then(data => {
          if (data.statusCode == 200) {
            self.adminVal = data.data.account;
            self.phoneVal = data.data.mobile;
            self.nameVal = data.data.realName;
            self.jurisdictionCode = data.data.roles[0].code;
            self.jurisdictionVal = data.data.roles[0].name;
          } else {
            self.$message(data.statusMessage);
          }
        })
        .catch(msg => {
          self.$message("服务器异常");
        });
    }
    self.getList();
  },
  watch: {},
  mounted() {},
  methods: {
    //角色选择
    jurisdicClick() {
      this.jurisdicShow = true;
    },
    //获取角色列表
    getList() {
      let self = this;
      taskRequest
        .adminRoleListFun({
          page: 1,
          size: 100
        })
        .then(data => {
          if (data.statusCode == 200) {
            if (data.data.records) {
              self.dataList = [];
              data.data.records.forEach(ele => {
                self.dataList.push({
                  name: ele.name,
                  code: ele.code,
                  show: false
                });
              });
              self.totalVal = data.data.total;
            } else {
              self.$message(data.statusMessage);
            }
          } else {
            self.$message(data.statusMessage);
          }
        })
        .catch(msg => {
          self.$message("服务器异常");
        });
    },
    //分页 - 每页条数
    handleSizeChange(val) {
      this.currentPage = val;
      this.getList();
    },
    //分页 - 页数
    handleCurrentChange(val) {
      this.pageSize = val;
      this.getList();
    },
    //确认选择角色
    checkOkClick(index) {
      this.jurisdicShow = false;
      this.jurisdictionVal = this.dataList[index].name;
      this.jurisdictionCode = [];
      this.jurisdictionCode.push(this.dataList[index].code);
    },
    //取消选择角色
    jurisdicCancelClick() {
      this.jurisdicShow = false;
    },
    //账户管理
    cancelClick() {
      this.$router.push({
        path: "/home/account"
      });
    },
    //保存
    addClick() {
      let self = this;
      if (self.adminVal == "") {
        this.adminShow = true;
        return;
      } else {
        this.adminShow = false;
      }
      let reg = new RegExp("^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z_]{8,16}$");
      if (self.$route.query.button == "add") {
        if (self.passwordVal.length < 8) {
          self.passwordShow = true;
          return;
        } else {
          if (reg.test(self.passwordVal)) {
            self.passwordShow = false;
          } else {
            self.passwordShow = true;
            return;
          }
        }
        if (self.passwordVal != self.passwordOkVal) {
          this.passwordOkShow = true;
          return;
        } else {
          this.passwordOkShow = false;
        }
      }
      if (self.nameVal == "") {
        this.nameShow = true;
        return;
      } else {
        this.nameShow = false;
      }
      var phoneReg = /^1[3|4|5|6|8|9|7][0-9]\d{8}$/; //输入手机号码
      if (phoneReg.test(self.phoneVal)) {
        self.phoneShow = false;
      } else {
        self.phoneShow = true;
        return;
      }
      if (self.jurisdictionVal == "点击选择角色") {
        self.checkShow = true;
        return;
      } else {
        self.checkShow = false;
      }
      let obj = {};
      let possible = self.passwordOkVal;
      let shaCode = crypto.createHash("md5");
      let md5Str = shaCode.update(possible, "utf-8").digest("hex");
      if (self.$route.query.button == "add") {
        obj = {
          account: self.adminVal,
          mobile: self.phoneVal,
          password: md5Str,
          realName: self.nameVal,
          roles: self.jurisdictionCode
        };
      } else {
        obj = {
          account: self.adminVal,
          code: self.$route.query.code,
          mobile: self.phoneVal,
          password: md5Str,
          realName: self.nameVal,
          roles: self.jurisdictionCode
        };
      }
      taskRequest
        .adminInsertFun(JSON.stringify(obj))
        .then(data => {
          if (data.statusCode == 200) {
            self.$router.push({
              path: "/home/account"
            });
          } else {
            self.$message(data.statusMessage);
          }
        })
        .catch(msg => {
          self.$message("服务器异常");
        });
    }
  }
};
</script>
<style scoped>
.editUpImgHand {
  width: 200px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  background: #f2f5f7;
  color: #b2b7c0;
}

.editUpImgHand i {
  font-size: 20px;
}

.footButton {
  display: flex;
  width: 700px;
  align-items: center;
  margin-top: 124px;
  margin-left: 230px;
}

.addBut {
  width: 150px;
  height: 50px;
  border-radius: 25px;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
  margin: 0 12px;
  background: #279de2;
  color: white;
}

.cancelBut {
  width: 150px;
  height: 50px;
  border-radius: 25px;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
  margin: 0 12px;
  border: 1px solid #279de2;
  color: #279de2;
}

.checkUl {
  width: 420px;
  min-height: 20px;
  display: flex;
}

.checkLi {
  width: 140px;
  height: 20px;
  overflow: hidden;
}

.checkBox {
  width: 100px;
  height: 20px;
  line-height: 20px;
  margin-right: 50px;
  color: #2f3a5d;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
}

.passwordBox {
  width: 700px;
  height: 500px;
  background: white;
  border-radius: 4px;
  margin: 200px auto;
  overflow: hidden;
}

.passwordConter {
  width: 100%;
  height: 360px;
  overflow-x: hidden;
  overflow-y: scroll;
}

.jurisdicBut {
  cursor: pointer;
}

.listOne {
  width: 30%;
}

.listTwo {
  width: 30%;
}

.listThree {
  width: 40%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.okbut {
  background: #279de2;
}
</style>